<template>
  <el-dialog
    v-model="visible"
    :center="center"
    :close-on-click-modal="closeOnClickModal"
    :close-on-press-escape="closeOnPressEscape"
    :draggable="draggable"
    :show-close="showClose"
    :title="title"
    :width="width"
    @close="handleClose"
  >
    <div class="confirm-content">
      <el-icon v-if="type" class="confirm-icon" :class="type">
        <component :is="getIcon" />
      </el-icon>
      <div class="confirm-message">{{ message }}</div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button v-if="showCancelButton" :type="cancelButtonType" @click="handleCancel">
          {{ cancelButtonText }}
        </el-button>
        <el-button :loading="loading" :type="confirmButtonType" @click="handleConfirm">
          {{ confirmButtonText }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { CircleCheck, CircleClose, InfoFilled, Warning } from '@element-plus/icons-vue'
import { computed } from 'vue'
import type { ConfirmDialogEvents } from './types'

const props = withDefaults(
  defineProps<{
    modelValue: boolean
    title?: string
    message: string
    type?: 'success' | 'warning' | 'info' | 'error'
    confirmButtonText?: string
    cancelButtonText?: string
    confirmButtonType?: 'primary' | 'success' | 'warning' | 'danger' | 'info'
    cancelButtonType?: 'primary' | 'success' | 'warning' | 'danger' | 'info'
    showCancelButton?: boolean
    showClose?: boolean
    closeOnClickModal?: boolean
    closeOnPressEscape?: boolean
    loading?: boolean
    width?: string | number
    center?: boolean
    draggable?: boolean
  }>(),
  {
    title: '提示',
    type: 'warning',
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    confirmButtonType: 'primary',
    cancelButtonType: 'info',
    showCancelButton: true,
    showClose: true,
    closeOnClickModal: false,
    closeOnPressEscape: true,
    loading: false,
    width: '30%',
    center: true,
    draggable: false,
  }
)

const emit = defineEmits<ConfirmDialogEvents>()

// 图标映射
const iconMap = {
  success: CircleCheck,
  warning: Warning,
  info: InfoFilled,
  error: CircleClose,
}

// 获取图标组件
const getIcon = computed(() => {
  return iconMap[props.type || 'warning']
})

// 处理关闭
const handleClose = () => {
  emit('update:modelValue', false)
}

// 处理取消
const handleCancel = () => {
  emit('update:modelValue', false)
  emit('cancel')
}

// 处理确认
const handleConfirm = () => {
  emit('confirm')
}
</script>
<style scoped>
.confirm-content {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 0;
}
.confirm-icon {
  font-size: 24px;
  flex: 0 0 auto;
}
.confirm-icon.success {
  color: var(--el-color-success);
}
.confirm-icon.warning {
  color: var(--el-color-warning);
}
.confirm-icon.info {
  color: var(--el-color-info);
}
.confirm-icon.error {
  color: var(--el-color-danger);
}
.confirm-message {
  flex: 1;
  font-size: 14px;
  line-height: 1.5;
  color: var(--el-text-color-primary);
}
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
</style>
